<template>
    <div>
        <div class="label">
            <div>成员列表</div>
        </div>
        <div class="container">
            <div class="cl-crud">
                <el-row type="flex">
                    <el-button type="default" size="mini" @click="getUserPage">刷新</el-button>
                    <el-button type="primary" size="mini" @click="handleAddUser">添加</el-button>
                    <el-button type="danger" :disabled="deleteable" size="mini" @click="handleDeleteUser">删除</el-button>
                    <el-button type="success" :disabled="moveable" size="mini" @click="handleMoveUser">转移</el-button>
                    <div style="flex: 1 1 0%;"></div>
                    <div class="crud-search-key">
                        <el-select v-if="false" size="mini" class="crud-search-key__select" v-model="value" placeholder="请选择"></el-select>
                        <el-input size="mini" class="crud-search-key__input" v-model="searchForm.keyWord" placeholder="请输入关键字"></el-input>
                        <el-button type="primary" size="mini" class="crud-search-key__button" @click="getUserPage">搜索</el-button>
                    </div>
                </el-row>
                <el-row type="flex">
                    <el-table :data="list" :fit="true" border  :max-height="670" size="small" :header-cell-style="{'padding': '6px 0'}" :cell-style="{'padding': '6px 0'}">
                        <el-table-column
                                type="selection"
                                align="center"
                                header-align="center"
                                width="60">
                        </el-table-column>
                        <el-table-column label="头像" prop="headImg" width="80" align="center" header-align="center">
                            <template slot-scope="scope">
                               <div class="cell">
                                    <div class="cl-avatar medium square" style="margin: auto">
                                        <el-image :src="scope.row.headImg ? scope.row.headImg : '/head-no.png'"></el-image>
                                    </div>
                               </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="姓名" prop="name" width="150" align="center" header-align="center"></el-table-column>
                        <el-table-column label="用户名" prop="username" width="150" align="center" header-align="center"></el-table-column>
                        <el-table-column label="昵称" prop="nickName" width="150" align="center" header-align="center"></el-table-column>
                        <el-table-column label="部门名称" prop="departmentName" width="150" align="center" header-align="center"></el-table-column>
                        <el-table-column label="角色" prop="roleName" width="200" header-align="center">
                            <template slot-scope="scope">
                                <div class="cell">
                                    <el-tag size="medium" style="margin: 2px" v-if="scope.row.roleName" :key="index" v-for="(name, index) in scope.row.roleName.split(',')">
                                        {{name}}
                                    </el-tag>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="手机号码" prop="phone" width="150" align="center" header-align="center">
                            <template slot-scope="scope">
                                <div class="cell">
                                    {{scope.row.phone ? scope.row.phone : '无'}}
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="备注" prop="remark" width="150" align="center" header-align="center">
                            <template slot-scope="scope">
                                <div class="cell">
                                    {{scope.row.remark ? scope.row.remark : '无'}}
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="状态" prop="status" width="150" align="center" header-align="center">
                            <template slot-scope="scope">
                                <div class="cell">
                                    <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">{{scope.row.status === 1 ? '启用' : '禁用'}}</el-tag>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column sortable label="创建时间" prop="createTime" width="150" align="center" header-align="center"></el-table-column>
                        <el-table-column
                                fixed="right"
                                label="操作"
                                width="150" align="center" header-align="center">
                            <template slot-scope="scope">
                                <el-button type="text" size="small" @click="handleMoveUser(scope.row)">转移</el-button>
                                <el-button type="text" size="small" @click="handleUpdateUser(scope.row)">编辑</el-button>
                                <el-button type="text" size="small" @click="handleDeleteUser(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-row>
                <el-row type="flex">
                    <div style="flex: 1 1 0%;"></div>
                    <el-pagination
                            :page-sizes="[20, 50, 100, 200]"
                            :page-size="pagination.page"
                            background
                            @size-change="getUserPage"
                            @current-change="getUserPage"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="pagination.total">
                    </el-pagination>
                </el-row>
            </div>
        </div>
        <form-dialog
                :width="'50%'"
                :title="addable?'新增成员':'编辑成员'"
                :visible="addable || updateable"
                @submit="submit"
                @close="addable=updateable=false">
            <Form ref="userForm" :updateable="updateable" :form="dataForm"></Form>
        </form-dialog>
    </div>
</template>

<script>
    import FormDialog from '../../../components/formDialog.vue'
    import Form from './form'

    export default {
        props: {
            department: {
                type: Object,
                default() {
                    return {
                        departmentId: "1",
                        departmentName: null,
                        departmentIds: "1"
                    }
                }
            }
        },
        components: {
            FormDialog, Form
        },
        data() {
            return {
                moveable: true,
                deleteable: true,
                addable: false,
                updateable: false,

                list: [],
                pagination: {
                    page: 1,
                    size: 20,
                    total: 1
                },
                tempForm: {},
                dataForm: {
                    headImg: null,
                    name: null,
                    nickName: null,
                    username: null,
                    roleIdList: [],
                    phone: null,
                    email: null,
                    remark: null,
                    status: 1
                },
                searchForm: {
                    keyWord: null,
                    sort: "desc",
                    order: "createTime",
                    departmentIds: null
                }
            }
        },
        created() {
            this.getUserPage()
        },
        methods: {
            getUserPage() {
                this.searchForm.page = this.pagination.page
                this.searchForm.size = this.pagination.size
                this.searchForm.departmentIds = this.department.departmentIds
                let form = this.$clone(this.searchForm)
                this.$service.system.user.page(form).then((res) => {
                    this.list = res.list
                    this.pagination = res.pagination
                })
            },
            addUser(form) {

            },
            updateUser(form) {
                let addForm = this.$clone(form)
                this.$service.system.user.update(addForm).then((res) => {
                    this.dataForm = {}
                    this.tempForm = {}
                    this.addable = false
                    this.updateable = false
                    this.getUserPage()
                })
            },
            deleteUser(form) {
                let deleteForm = this.$clone(form)
                this.$service.system.user.delete(deleteForm).then((res) => {
                    this.dataForm = {}
                    this.tempForm = {}
                    this.getUserPage()
                })
            },
            submit() {
                this.$refs.userForm.validate((flag) => {
                    if (flag) {
                        if (this.addable && !this.updateable) {
                            this.addUser(this.dataForm)
                        } else if (!this.addable && this.updateable) {
                            this.updateUser(this.dataForm)
                        }
                    }
                })
            },
            handleAddUser() {
                this.addable = true
                this.updateable = false
            },
            handleUpdateUser (row) {
                this.tempForm = this.$clone(row)
                this.dataForm = {
                    id: this.tempForm.id,
                    headImg: this.tempForm.headImg,
                    name: this.tempForm.name,
                    nickName: this.tempForm.nickName,
                    username: this.tempForm.username,
                    roleIdList: this.tempForm.roleIdList,
                    roleName: this.tempForm.roleName,
                    phone: this.tempForm.phone,
                    email: this.tempForm.email,
                    remark: this.tempForm.remark,
                    status: this.tempForm.status
                }
                this.addable = false
                this.updateable = true
            },
            handleDeleteUser(row) {
                this.tempForm = this.$clone(row)
                this.$confirm('此操作将永久删除选中数据，是否继续？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteUser({
                        ids: row.id
                    })
                }).catch(() => {
                });
            },
            handleMoveUser() {

            }
        }
    };
</script>

<style lang="scss" scoped>
    .cl-crud {
        display: flex;
        flex-direction: column;
        height: 100%;
        position: relative;
        padding: 10px;
        box-sizing: border-box;
        background-color: #fff;
        overflow: hidden;

        .el-row {
            margin-bottom: 10px;
        }

        .crud-search-key {
            display: flex;
        }

        .crud-search-key__select {
            width: 150px;
            margin-right: 10px;
        }

        .crud-search-key__input {
            width: 250px;
        }

        .crud-search-key__button {
            margin-left: 10px;
        }

        .cl-avatar.square {
            border-radius: 10%;

            .el-image, .cl-avatar img {
                height: 100%;
                width: 100%;
            }
        }

        .cl-avatar.medium {
            height: 40px;
            width: 40px;
        }

        .cl-avatar {
            overflow: hidden;
            background-color: #f7f7f7;
        }
    }
</style>
